<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function delay(s) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(`延迟了${s}秒`)
          })
        })
      }
      async function fun1() {
        const res1 = await delay(1)
        console.log('res1', res1)
        const res2 = await delay(3)
        console.log('res2', res2)
      }
      async function fun2() {
        const res3 = await delay(2)
        console.log('res3', res3)
        const res4 = await delay(4)
        console.log('res4', res4)
      }
      //   fun1()
      //   fun2()
      // res1 res3 res2 res4
      // await函数只能影响async函数内部的执行顺序，并不能影响外部函数的执行顺序
      //   验证async函数的返回值是什么:promise
      //   let p = fun1()
      //   console.log('p', p) // promise

      // 想要先执行完fun1里面的所有代码，再去执行func2里面的代码，又该怎么做？
      async function yyy() {
        await fun1()
        await fun2()
      }
      yyy() // res1 res2 res3 res4

      // 以上代码等价于：
      fun1().then((res) => {
        fun2()
      })

      // 再次证明：
      //await函数只能影响async函数内部的执行顺序，并不能影响外部函数的执行顺序
      console.log('top111')
      yyy()
      console.log('bottom111')
      // top111 bottom111 res1 res2 res3 res4
    </script>
  </body>
</html>
